<template>
  <el-dialog
    title="查询条件"
    :close-on-click-modal="false"
    :visible.sync="visible"
    append-to-body>
    <el-form :model="dataForm" style="padding:0px 30px" ref="dataForm" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="证书类型">
            <el-select v-model="dataForm.certificateType" style="width:100%">
              <el-option
                v-for="item in certificateTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态">
            <el-select v-model="dataForm.type" style="width:100%">
              <el-option
                v-for="item in typees"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input v-model="dataForm.name" placeholder="请填写姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号">
            <el-input v-model="dataForm.idCard" placeholder="请填写身份证号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input v-model="dataForm.mobile" placeholder="请填写手机号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历">
            <el-select v-model="dataForm.academic" placeholder="请选择学历" style="width:100%">
                <el-option
                  v-for="item in academics"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="证书类型">
            <el-select v-model="dataForm.pidType" filterable placeholder="请选择证书类型" style="width:50%" @change="jobChange">
              <el-option
                v-for="item in jobs"
                :key="item.id"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
            <el-select v-model="dataForm.idType" filterable placeholder="请选择证书类别" style="width:48%" @change="confChange">
              <el-option
                v-for="item in confInfos"
                :key="item.id"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证书专业">
            <el-select v-model="dataForm.profession" placeholder="请选择证书专业" style="width:100%">
                <el-option
                  v-for="item in professions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="保管部门">
            <el-tree-select
              style="width:100%"
              :data="treeData"
              v-model="dataForm.keepDeptId"
              node-key="id"
              placeholder="请选择保管部门"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证书编号">
            <el-input v-model="dataForm.certificateNo" placeholder="请填写证书编号"></el-input>
          </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="发证日期">
            <el-date-picker type="date" v-model="dataForm.releaseTime" placeholder="选择发证日期" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="证书到期日期">
            <el-date-picker type="date" v-model="dataForm.validityEndTime" placeholder="选择证书到期日期" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="12">
          <el-form-item label="借入/借出时间">
            <el-date-picker type="date" v-model="dataForm.transactionTime" placeholder="借入/借出时间" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="到期日期">
            <el-date-picker type="date" v-model="dataForm.transactionValidityEndTime" placeholder="选择到期日期" style="width:100%"></el-date-picker>
          </el-form-item>
        </el-col>
    </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="restForm()">重置</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import Vue from "vue"
  import ElTreeSelect from "@/components/treeSelect/index.vue"
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          certificateType: '',
          keepDeptId: '',
          keepUserId: '',
          name: '',
          idType: '',
          idCard: '',
          certificateNo: '',
          mobile: '',
          profession:'',
          academic: '',
          releaseTime: '',
          validityEndTime: '',
          type: "",
          transactionTime: '',
          transactionValidityEndTime: ''
        },
        certificateTypes:[{
          value: '',
          label: '--全部--'
        }, {
          value: 1,
          label: '在职员工'
        }, {
          value: 2,
          label: '挂靠'
        },{
          value: 3,
          label: '非在职员工'
        }],
        academics: [{
          value: '博士',
          label: '博士'
        }, {
          value: '硕士',
          label: '硕士'
        }, {
          value: '本科',
          label: '本科'
        }, {
          value: '专科',
          label: '专科'
        }, {
          value: '高职高专',
          label: '高职高专'
        }, {
          value: '中专',
          label: '中专'
        }, {
          value: '高中',
          label: '高中'
        }, {
          value: '初中',
          label: '初中'
        }, {
          value: '小学',
          label: '小学'
        }, {
          value: '其他',
          label: '其他'
        }],
        typees:[
          {label:'挂入', value:11},
          {label:'归还', value:12},
          {label:'挂出', value:21},
          {label:'收回', value:22},
          {label:'借出', value:3},
          {label:'还回', value:30},

        ],
        treeData: [],
        jobs: [],
        professions: [],
        confInfos: []
      }
    },
    components: {
      ElTreeSelect
    },
    created () {
      this.initOrgTree()
      this.initJobs()
    },
    methods: {
      init(){
        this.visible = true
      },
      initOrgTree() {
        this.$http({
          url: this.$http.adornUrl('/tenant/tenantDeptInfo/tree'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.treeData = [data.deptInfo]
          } else {
            this.treeData = []
          }
        })
      },
      initJobs() {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.jobs = data
          }
        })
      },
      jobChange(value, item){
        this.confInfos = []
        this.professions = []
        this.dataForm.idType = ''
        this.dataForm.profession = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': value
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.confInfos = data
          }
        })
      },
      confChange(value, item){
        this.professions = []
        this.dataForm.profession = ''
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
          method: 'get',
          params: this.$http.adornParams({
                  'type': value
                })
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.professions = data
          }
        })
      },
      restForm(){
        this.dataForm = {
          certificateType: "",
          keepDeptId: '',
          keepUserId: '',
          name: '',
          idType: '',
          idCard: '',
          certificateNo: '',
          mobile: '',
          profession:'',
          academic: '',
          releaseTime: '',
          validityEndTime: '',
          type: "",
          transactionTime: '',
          transactionValidityEndTime: ''
        }
      },
      dataFormSubmit () {
        let params = {
          'certificateType': this.dataForm.certificateType,
          'type': this.dataForm.type,
          'keepDeptId': this.dataForm.keepDeptId,
          'keepUserId': this.dataForm.keepUserId,
          'name': this.dataForm.name,
          'idType': this.dataForm.idType,
          'idCard': this.dataForm.idCard,
          'certificateNo': this.dataForm.certificateNo,
          'mobile': this.dataForm.mobile,
          'profession': this.dataForm.profession,
          'academic': this.dataForm.academic,
          'releaseTime': this.$dateFormatNoTime(this.dataForm.releaseTime),
          'validityEndTime': this.$dateFormatNoTime(this.dataForm.validityEndTime),
          'transactionTime': this.$dateFormatNoTime(this.dataForm.transactionTime),
          'transactionValidityEndTime': this.$dateFormatNoTime(this.dataForm.transactionValidityEndTime),
        }
        this.visible = false
        this.$emit('refreshDataList', params)
      }
    }
  }
</script>
<style lang="scss">
  .el-input__inner{
    height: 36px;
  }
</style>
